<template>
  <div class="app-container calendar-list-container">

    <el-form ref="form" :model="form" label-width="140px">
      <el-card class="box-card">
        <h3>基本信息</h3>
        <el-row>
          <el-col :span="12">
            <globalFormItem :key="formKey" :config="globalConfig" label="所属用户" v-model="form.boundUserId"
                            prop="boundUserId" placeholder="请选择用户" type="select"
                            :load="userRemoteDataUrl"></globalFormItem>
          </el-col>
          <el-col :span="12">
            <globalFormItem :key="formKey" :config="globalConfig" label="商家类型" v-model="form.businessType"
                            prop="businessType" placeholder="请选择商家类型" type="select"></globalFormItem>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <globalFormItem :key="formKey" :config="globalConfig" label="手 机 号" v-model="form.mobile" prop="mobile"
                            placeholder="请输入手机号"></globalFormItem>
          </el-col>
          <el-col :span="12">
            <globalFormItem :key="formKey" :config="globalConfig" label="邮箱地址" v-model="form.email" prop="email"
                            placeholder="请输入邮箱地址"></globalFormItem>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <globalFormItem :key="formKey" :config="globalConfig" label="商家姓名" v-model="form.legalPerson"
                            prop="legalPerson" placeholder="请输入姓名"></globalFormItem>
          </el-col>
          <el-col :span="12">
            <globalFormItem :key="formKey" :config="globalConfig" label="身 份 号" v-model="form.idCard" prop="idCard"
                            placeholder="请输入身份证"></globalFormItem>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <globalFormItem :key="formKey" :config="globalConfig" label="头 像 面" v-model="form.idCardPositiveImage"
                            prop="idCardPositiveImage" type="img"
                            placeholder="请上传身份证图片" width="50%"></globalFormItem>
          </el-col>
          <el-col :span="12">
            <globalFormItem :key="formKey" :config="globalConfig" label="国 徽 面" v-model="form.idCardReverseImage"
                            prop="idCardReverseImage" type="img"
                            placeholder="请上传身份证图片" width="50%"></globalFormItem>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <h3>银行信息</h3>
        <el-row>
          <el-col :span="12">
            <globalFormItem :key="formKey" :config="globalConfig" label="银行名称" v-model="form.bankName" prop="bankName"
                            placeholder="请输入银行名称"></globalFormItem>
          </el-col>
          <el-col :span="12">
            <globalFormItem :key="formKey" :config="globalConfig" label="银行账号" v-model="form.bankAccount"
                            prop="bankAccount" placeholder="请输入银行账号"></globalFormItem>
          </el-col>
        </el-row>
      </el-card>


      <el-card class="box-card" v-if="form.businessType==1">
        <h3>企业信息</h3>
        <el-row>
          <el-col :span="24">
            <globalFormItem :key="formKey" :config="globalConfig" label="纳税人识别号" v-model="form.identificationNumber"
                            prop="identificationNumber" placeholder="请输入纳税人识别号"></globalFormItem>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <globalFormItem :key="formKey" :config="globalConfig" label="公司营业执照" v-model="form.licenseImage"
                            prop="licenseImage" type="img"
                            placeholder="公司营业执照"></globalFormItem>
          </el-col>
        </el-row>

      </el-card>
      <div class=" sticky">
        <el-button type="danger" @click="handleCancel" icon="el-icon-refresh-right" circle></el-button>
        <el-button v-if="saveStatus=='create'" type="primary" icon="el-icon-edit" @click="create" circle></el-button>
        <el-button v-else type="primary" icon="el-icon-edit" @click="update" circle></el-button>

      </div>
    </el-form>
  </div>
</template>

<style scoped>
  .sticky {
    width: 80%;
    position:fixed;
    bottom:0;
    margin-bottom: 80px;
  }

  .sticky .el-button{
    height: auto;
     float: right;
     margin-right: 20px;
  }

  .el-card__body {
    padding: 10px !important;
  }

  .el-card {
    padding-top: 10px;
    margin-bottom: 10px!important;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .input-new-keyword {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .el-form-item .el-input {
    width: 320px;
  }

  .el-form-item .el-select {
    width: 320px;
  }

  .el-form-item .el-cascader {
    width: 320px;
  }
</style>

<script>
  import {
    fetchList,
    getObj,
    addObj,
    putObj,
    delObj,
    casObj
  } from '@/api/store/business'
  // import { remoteData as userRemoteData } from "@/api/user";
  import waves from '@/directive/waves/index.js' // 水波纹指令
  import { mapGetters } from 'vuex'
  import { globalNotify } from '@/util/notifyUtils' //弹窗
  import { getToken } from '@/util/auth'
  import globalSearchTemplate from '@/components/global-el-search-template'
  import globalTableColumn from '@/components/global-el-table-column'
  import globalFormItem from '@/components/global-el-form-item'
  import uuid from 'uuid'
  import { remoteData as userRemoteData } from '@/api/user/usersInfo'

  export default {
    name: 'add',
    components: { globalSearchTemplate, globalTableColumn, globalFormItem },
    directives: {
      waves
    },
    data() {
      return {
        globalConfig: {
          module: ['store'],
          componentName: ['business']
        },
        form: {
          bankAccount: undefined,
          bankName: undefined,
          email: undefined,
          idCard: undefined,
          idCardPositiveImage: undefined,
          idCardReverseImage: undefined,
          identificationNumber: undefined,
          legalPerson: undefined,
          licenseImage: undefined,
          licenseNumber: undefined,
          mobile: undefined,
          organizationCode: undefined,
          organizationImage: undefined,
          taxImage: undefined,
          boundUserId: undefined,
          businessType: 0
        },
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        key: '',
        formKey: '',
        userRemoteDataUrl: userRemoteData,
        saveStatus:"create"
      }
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    filters: {},
    created() {
      let businessId = this.$route.query.businessId// 列表页查询参数暂存
      if(businessId!=undefined)
        this.read(businessId)
    },
    methods: {
      handleCancel() {
        this.$store.commit("DEL_CURRENT_TAG", null);
        this.$router.push({path: '/store/business'})
      },
      create() {
        addObj(this.form).then(response => {
          this.dialogFormVisible = false
          this.getList()
          globalNotify(this, response)
        })
      },
      update() {
        putObj(this.form).then(response => {
          globalNotify(this, response)
        })
      },
      read(id) {
        this.saveStatus = 'update'
        this.resetForm()
        getObj(id).then(response => {
          this.form = response.data.data
          this.refreshForm()
        })
      },
      resetForm() {
        this.form = {
          bankAccount: undefined,
          bankName: undefined,
          email: undefined,
          idCard: undefined,
          idCardImage: undefined,
          identificationNumber: undefined,
          legalPerson: undefined,
          licenseImage: undefined,
          licenseNumber: undefined,
          mobile: undefined,
          organizationCode: undefined,
          organizationImage: undefined,
          taxImage: undefined,
          boundUserId: undefined
        }
      },
      refreshForm() {
        this.formKey = new Date().getTime()
      },
    }
  }
</script>
